<template>
    <div class="body">
        <div class="header">
            <div class="head">
                <i class="iconfont icon-fanhui"></i>
                <div class="right">密码登录</div>
            </div>
            <div class="pict"><img src="../assets/bg-2.png" alt=""></div>
        </div>
        <div class="content">
            <div class="content-box">
                <div class="first">
                    <input type="text" v-model="form.username" placeholder="请输入手机号">
                </div>
                <div class="first">
                    <input type="text" v-model="form.password" placeholder="请输入验证码">
                    <div class="line">获取验证码</div>
                </div>
                <div class="second" @click="login">登录</div>
                <div class="thirdly">
                    <input type="checkbox">
                    <p>《隐私政策》我已阅读并同意《乐康养老用户协议》</p>
                </div>
                <div class="fourth">忘记密码</div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'LoginView',
    data() {
        return {
            form: {
                username: '13000000000',
                password: '123456'
            }
        }
    },
    methods: {
        login() {
            this.$store.dispatch('loginAsync', this.form)
        }
    }
}
function adapter() {
    //获取布局视口宽度，因为开启了理想视口，布局视口=设备横向独立像素值
    const dpWidth = document.documentElement.clientWidth
    //计算根字体大小
    const rootFonstSize = (dpWidth * 100) / 750
    //设置根字体大小
    document.documentElement.style.fontSize = rootFonstSize + 'px'
}
adapter()
window.onresize = adapter
</script>
<style lang="less">
@import url(../assets/iconfont/iconfont.css);

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.body {
    width: 100%;
    min-height: 100vh;
    background-color: #f5f5f5;

    .header {
        width: 100%;
        height: 4.1rem;
        background: url('../assets/bg-3.png') no-repeat;
        background-size: 100% 100%;
        padding-top: 1px;

        .head {
            width: 100%;
            display: flex;
            justify-content: space-between;
            font-size: .24rem;
            padding: 0 .23rem;
            margin-top: 1rem;
        }

        .pict {
            width: 2.47rem;
            height: .77rem;
            margin: auto;

            img {
                width: 100%;
                height: 100%;
            }
        }
    }

    .content {
        width: 100%;
        padding: 0 .27rem;

        .content-box {
            height: 6.5rem;
            background-color: #fff;
            border-radius: .2rem;
            transform: translate(0, -1.23rem);
            padding: 0.3rem .49rem;

            .first {
                border-bottom: 1px solid #f2f2f2;
                // background-color: aqua;
                position: relative;

                input {
                    width: 100%;
                    height: 1.12rem;
                    border: 0;
                    font-size: .28rem;
                    margin-top: .27rem;
                }

                .line {
                    width: 1.96rem;
                    height: .69rem;
                    border: 1px solid #f7f7f7;
                    border-radius: .36rem;
                    text-align: center;
                    line-height: .69rem;
                    font-size: .22rem;
                    color: #000;
                    position: absolute;
                    right: 0;
                    top: 0.48rem;
                }
            }

            .second {
                height: .83rem;
                background-color: #5483ef;
                border-radius: .2rem;
                text-align: center;
                line-height: .83rem;
                font-size: .37rem;
                color: #fff;
                margin-top: .65rem;
            }

            .thirdly {
                display: flex;
                font-size: .24rem;
                margin-top: .62rem;
            }

            .fourth {
                text-align: right;
                font-size: .23rem;
                color: #9b9b9b;
                margin-top: .4rem;
            }
        }
    }

}
</style>
